<template>
  <view class="outBox">
    <u-navbar leftText="消息通知" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
      <view class="left-slot" slot="left">
        <u-icon name="arrow-left" color="#fff"></u-icon>
        <text>{{ '消息通知' }}</text>
      </view>
    </u-navbar>
     <video :src="videoUrl + '/mp4/1.mp4'" autoplay :controls="false" loop object-fit="cover"></video>
    <view class="bgBox"></view>

    <view class="content" :style="{
			marginTop:menuHeight + 'px',
		}">
      <view class="list">
        <view class="item">
          <view class="left">
            <image src="/static/mine/icon14.png" mode="scaleToFill"></image>
            <text class="name">消费</text>
          </view>
        </view>
        <view class="item">
          <view class="left">
            <image src="/static/mine/icon15.png" mode="scaleToFill"></image>
            <text class="name">用户下单</text>
          </view>
        </view>
        <view class="item">
          <view class="left">
            <image src="/static/mine/icon16.png" mode="scaleToFill"></image>
            <text class="name">体现</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getWXStatusHeight
} from '@/utils/index.js'

export default {
  data() {
    return {
      // 胶囊的宽度
      barWidth: 0,
      menuHeight: 0,
      money: 2000,
      baseImgUrl: this.$baseImgUrl,
      videoUrl: this.$videoUrl,
    }
  },
  onLoad() {
    let obj = getWXStatusHeight()
    this.barWidth = obj.barWidth + 3
    this.menuHeight = obj.menuHeight
    console.log(obj, "obj");
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.bgBox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}
.list {
  margin-top: 40rpx;
  color: #fff;
  background: rgba(0,0,0,0.22);
  border-radius: 60rpx;
  border: 2rpx solid #1e2c2d;
  backdrop-filter: blur(7px);

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 36rpx;
    border-bottom: 1rpx solid #192626;
    image {
      border-radius: 50%;
      width: 68rpx;
      height: 68rpx;
      margin-right: 24rpx;
    }

    .left {
      display: flex;
      align-items: center;

    }
  }
}

.btns {
  display: flex;
  justify-content: center;
  margin-top: 50rpx;
  position: relative;
  z-index: 99;

  .btn {
    padding: 10rpx 30rpx;
    color: #fff;
    border-radius: 10rpx;
    font-size: 26rpx;
    background-color: #5aa10c;
  }
}

.content {
  position: relative;
  padding: 20rpx 40rpx;
  box-sizing: border-box;
  z-index: 99;
}

.left-slot {
  color: #fff;
  display: flex;
  align-items: center;

  image {
    width: 40rpx;
    margin-right: 30rpx;
  }
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保视频填充整个容器，可能会裁剪视频 */
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 0;
}

</style>
